import React, { Component } from 'react'
import {Redirect} from 'react-router-dom'
import { Form, Input, Button,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'

import { createSaveUserInfoAction } from '../../redux/actions/login_action'
import { reqLogin } from '../../api'

import './login.less'
import logo from '../../assets/images/logo.png'

//UI组件
@connect(
  state => ({isLogin: state.userInfo.isLogin}),
  {
    saveUserInfo:createSaveUserInfoAction,
  }
)
class Login extends Component {
  
  //点击登录的回调
  onFinish = async (values) => {
    // 收集了From表单信息values
    const { username, password } = values;
    const result = await reqLogin(username, password)
    const { status,msg,data } = result;
    if (status === 0) {
      // console.log(data);
      message.success('登录成功',1)
      //保存用户的信息到redux
      this.props.saveUserInfo(data)
      //登录成功，跳转到admin
      this.props.history.replace('/admin/home')
    } else {
      //登录失败，提示错误信息
      message.warning(msg,1)
    }
  };

  //密码的自定义验证器
  pwdValidator = (rule, value) => {
    // console.log(rule,value);
    return new Promise((resolve, reject) => {
      if (!value) {
        reject('密码必须输入!')
      } else if (value.length < 4) {
        reject('密码必须大于等于4位!')
      } else if (value.length > 12) {
        reject('密码必须小于等于12位!')
      } else if (!/^\w+$/.test(value)) {
        reject('密码必须是字母、数字、下划线!')
      } else {
        resolve()
      }
    })
  }
  //在render里，若想实现跳转，最好用<Redirect/>,
  render () {
    // console.log(this.props);
    const {isLogin}=this.props
    if (isLogin) {
      // this.props.history.replace('/admin')//事件回调函数中进行路由跳转
      return <Redirect to='/admin'/>
    }
    return (
      <div className='login'>
        <header>
          <img src={logo} alt="logo" />
          <h1>商品管理系统</h1>
        </header>
        <section>
          <h1>用户登录</h1>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '用户名必须输入!',
                },
                {
                  max: 12,
                  message: '用户名必须小于等于12位!',
                },
                {
                  min: 4,
                  message: '用户名必须大于等于4位!',
                },
                {
                  pattern: /^\w+$/,
                  message: '用户名必须是字母、数字、下划线!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  validator: this.pwdValidator
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    )
  }
}

//容器组件
export default Login
